<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">

      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name" style="width: 46%" />
      </el-form-item>
      <el-form-item label="项目编码" prop="num">
        <el-input v-model="form.num" style="width: 46%" />
      </el-form-item>
      <el-form-item label="项目施工单位" prop="build">
        <el-input v-model="form.build" style="width: 46%" />
      </el-form-item>
      <el-form-item label="项目区域" prop="area">
        <el-select v-model="form.area " placeholder="请选择项目所在区域">
          <el-option label="市直管" value="371601" />
          <el-option label="滨城区" value="371602" />
          <el-option label="开发区" value="371604" />
          <el-option label="高新区" value="371605" />
          <el-option label="北海新区" value="371606" />
          <el-option label="惠民县" value="371621" />
          <el-option label="阳信县" value="371622" />
          <el-option label="无棣县" value="371623" />
          <el-option label="沾化区" value="371624" />
          <el-option label="博兴县" value="371625" />
          <el-option label="邹平市" value="371626" />
          <el-option label="工业园区" value="371627" />
        </el-select>
      </el-form-item>
      <el-form-item label="项目合作银行" prop="resource">
        <el-select v-model="form.resource " placeholder="请选择合作银行">
          <el-option label="农商银行" value="0" />
          <el-option label="邮储银行" value="1" />
          <el-option label="工商银行" value="2" />
          <el-option label="恒丰银行" value="3" />
          <el-option label="兴业银行" value="4" />
          <el-option label="中国银行" value="5" />
          <el-option label="东营银行" value="6" />
        </el-select>
      </el-form-item>
      <el-form-item label="项目状态" prop="state">
        <el-select v-model="form.state " placeholder="请选择项目状态">
          <el-option label="停工" value="0" />
          <el-option label="已开工" value="1" />
          <el-option label="完工" value="2" />
          <el-option label="筹建" value="3" />
          <el-option label="立项" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="系统服务费" prop="pay">
        <el-input v-model="form.pay" style="width: 46%" />
      </el-form-item>
      <el-form-item label="服务时间">
        <el-col :span="11">
          <el-date-picker v-model="form.paytime_start" type="date" placeholder="请选择一个开始时间" value-format="timestamp" style="width: 100%;" />
        </el-col>
        <el-col :span="2" class="line">-</el-col>
        <el-col :span="11">
          <el-date-picker v-model="form.paytime_end" type="date" placeholder="请选择一个结束时间" value-format="timestamp" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <el-form-item label="项目完工时间">
        <el-col :span="11">
          <el-date-picker v-model="form.time" type="date" placeholder="请选择一个时间" value-format="timestamp" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <el-form-item label="项目联系人" prop="person">
        <el-input v-model="form.person" style="width: 46%" />
      </el-form-item>

      <el-form-item label="项目联系人电话" prop="phone">
        <el-input v-model="form.phone" style="width: 46%" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        <el-button @click="onCancel('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addsubjectInfo } from '@/api/subject'
export default {
  data() {
    return {
      form: {
        subject_name: '',
        subject_num: '',
        subject_build: '',
        subject_bank: '',
        subject_pay: '',
        subject_paytime_start: '',
        subject_paytime_end: '',
        subject_time: '',
        subject_person: '',
        subject_phone: '',
        subject_area: '',
        subject_state: ''
      },
      rules: {
        name: [
          { required: true, message: '请填写项目名称', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请填写项目编号', trigger: 'blur' }
        ],
        person: [
          { required: true, message: '请填写项目联系人', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请填写项目联系人电话', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请填写项目所在地', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // resource: [
        //   { required: true, message: '请填写项目合作银行', trigger: 'blur' }
        // ],
        build: [
          { required: true, message: '请填写项目施工单位', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        pay: [
          { required: true, message: '请填写项目服务费', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '请选择工程状态', trigger: 'change' }
        ]
      }
    }
  },

  methods: {

    onSubmit(form) {
      // 获取表单信息
      var subject_num = this.form.num// 项目编码
      var subject_name = this.form.name// 项目铭传给你
      var subject_area = this.form.area// 项目所在地
      var subject_bank = this.form.resource// 项目所属银行
      var subject_build = this.form.build// 项目施工单位
      var subject_paytime_start = this.form.paytime_start// 项目服务费开始时间
      var subject_pay = this.form.pay// 项目服务费
      var subject_paytime_end = this.form.paytime_end// 项目服务费结束时间
      var subject_person = this.form.person// 项目联系人
      var subject_phone = this.form.phone// 项目联系人电话
      var subject_time = this.form.time// 项目完工时间
      var subject_state = this.form.state// 项目状态

      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log('ddddddd')
          addsubjectInfo(
            {
              subject_num: subject_num,
              subject_name: subject_name,
              subject_area: subject_area,
              subject_bank: subject_bank,
              subject_build: subject_build,
              subject_paytime_start: subject_paytime_start,
              subject_pay: subject_pay,
              subject_paytime_end: subject_paytime_end,
              subject_person: subject_person,
              subject_phone: subject_phone,
              subject_time: subject_time,
              subject_state: subject_state
            }).then((res) => {
            if (res.code == '20000') {
              this.$message('提交成功!')
            } else {
              this.$message({
                message: '提交失败，请联系管理员!',
                type: 'error'
              })
            }
          })
        } else {
          this.$message('请填完整后再提交!')
          console.log('error submit!!')
          return false
        }
      })
    },

    onCancel(form) {
      this.$message({
        message: '数据已清空!',
        type: 'warning'
      })
      this.$refs[form].resetFields()
    }
  }
}
</script>

<style scoped>
  .line{
    text-align: center;
  }
</style>

